<template>
	<div>
		<button @click="save">保存</button>
		<v-curd title="抬头类型">
			<div class="title">
				<b
					v-for="(v, i) in typeList"
					:key="i"
					:class="i === activeIndex ? 'active' : ''"
					@click="change(i)"
				>{{ v }}</b>
			</div>
		</v-curd>
		<v-curd title="抬头名称">
			<v-input v-model="editItem.name" type="text"></v-input>
		</v-curd>
		<v-curd title="税号" v-if="activeIndex !== 2">
			<v-input v-model="editItem.code" type="text"></v-input>
		</v-curd>
		<v-curd title="邮箱">
			<v-input v-model="editItem.email" type="text"></v-input>
		</v-curd>
		<v-curd title="需要增值税专用发票" v-if="activeIndex !== 2">
			<v-switch v-model="editItem.isRequire"></v-switch>
		</v-curd>
		<v-curd title="设置为默认发票">
			<v-switch v-model="editItem.isDefault"></v-switch>
		</v-curd>
		{{ editItem }}
		<button @click="del">删除</button>
	</div>
</template>

<script>
import Curd from '../components/curd'
import Input from '../components/input'
import Switch from '../components/switch'
export default {
	data() {
		return {
			typeList: ['企业', '非企业', '个人'],
			activeIndex: 0,
			editItem: {}
		}
	},
	created() {
		this.editItem = this.$route.query
	},
	computed: {
		type() {
			if (this.activeIndex === 0) return '企业'
			if (this.activeIndex === 1) return '非企业'
			return '个人'
		}
	},
	methods: {
		change(i) {
			// 切换高亮
			this.activeIndex = i
		},
		del() {
			this.$store.commit('DELETE_LIST', this.editItem)
			this.$router.push('/')
		},
		save() {
			this.editItem.type = this.type
			this.$store.commit('EDIT_LIST', this.editItem)
			this.$router.push('/')
		}
	},
	components: {
		'v-curd': Curd,
		'v-input': Input,
		'v-switch': Switch
	}
}
</script>

<style scoped>
.active {
	color: red;
}

b {
	padding: 0 10px;
}
</style>